window.onload = function(){
    /*
        初始化
    */
    // 每张轮播图的位置
    var rotationMapPosArr = Array('0px','-520px','-1040px','-1560px','-2080px','-2600px','-3120px');
    var rotationMapPosArr_i = 1;
    //轮播图的方向toLeft,toRight
    var rotationMapdirection = 'toRight';
    // 轮播图多久翻一次页，毫秒单位
    var rotationMaprollingDelay = 2000;
    // 翻页过渡时长，单位秒
    var rotationMaptransition = 0.2;
    // 轮播图容器
    var rotationMapbox = document.getElementsByClassName('rotationMapbox')[0];
    // 轮播图列表
    var rotationMapul = document.querySelector('.rotationMapbox > ul');
    // 定时器
    var rotationMaprunAuto_time = null;
    //左右翻页按钮
    var leftSwitch = document.getElementsByClassName('leftSwitch')[0];
    var rigthSwitch = document.getElementsByClassName('rigthSwitch')[0];
    // 选择页按钮
    var selectPageBtnArr = document.querySelector('.selectPageBtn');
    var selectPageBtnArrI = 0;
    // 记录上一次点击的翻页的按钮，用来取消其选中样式的
    var beforeTargetBtn = selectPageBtnArr.children[selectPageBtnArrI];
    beforeTargetBtn.classList.add('selectPageBtnAct');

    //启动轮播图
    rotationMaprunAuto();

    
    /*
        轮播图默认自动翻页
    */
    function rotationMaprunAuto(){
        clearInterval(rotationMaprunAuto_time);

        rotationMaprunAuto_time = setInterval(function (){
            rotationMaprun();
        }, rotationMaprollingDelay);
    }
    

    function rotationMaprun(mode){
        (mode == undefined) ? mode = "默认自动翻页" : 0;

        //临时记录一下轮播图的方向
        var temporary_rotationMapdirection = rotationMapdirection;

        //设置过渡时长
        rotationMapul.style.transitionDuration = rotationMaptransition + 's';
        console.log('判断方向前索引是',selectPageBtnArrI);
        //判断方向
        if(rotationMapdirection == 'toRight'){
            (mode == "默认自动翻页") ? selectPageBtnArrI++ : 0;
            rotationMapul.style.marginLeft = rotationMapPosArr[++rotationMapPosArr_i]
        }else {//往左边走
            (mode == "默认自动翻页") ? selectPageBtnArrI-- : 0;
            rotationMapul.style.marginLeft = rotationMapPosArr[--rotationMapPosArr_i]
        }
        console.log('判断方向后索引是',selectPageBtnArrI);

        //轮播图翻页后，重置他的默认翻页方向，如果不重置用户点击向左翻页，则会错误的默认一直自动向左翻页
        rotationMapdirection = 'toRight';

        //轮播图走动到最后一页，需要重置到初始位置
        if(rotationMapPosArr_i == 6 || rotationMapPosArr_i == 0){

            //回到初始位置，需要等当前过渡效果走完，所以需要设置延迟。否则就会出现瞬间调整位置，失去过渡效果
            setTimeout(function(){
                //每次进来要设置
                rotationMapul.style.transitionDuration = '0s';

                if(temporary_rotationMapdirection == 'toRight'){
                    rotationMapPosArr_i = 1;
                    rotationMapul.style.marginLeft = '-520px';
                }else if(temporary_rotationMapdirection == 'toLeft'){
                    rotationMapPosArr_i = 5;
                    rotationMapul.style.marginLeft = '-2600px';
                }
            },100); 
        }

        /*
            给选择按钮增加对应轮播图的选中样式
        */
        // 选择页按钮索引越界重置
        if(selectPageBtnArrI == 5){
            console.log('索引越界被重置到0');
            selectPageBtnArrI = 0;
        }else if(selectPageBtnArrI == -1){
            console.log('索引越界被重置到4');
            selectPageBtnArrI = 4;
        }
        //给对应的选择页按钮添加选中样式并记录选中节点，方便下一次变换是取消选中样式
        if(mode != '选择翻页'){
            selectBtnAct(beforeTargetBtn, selectPageBtnArr.children[selectPageBtnArrI]);
            beforeTargetBtn = selectPageBtnArr.children[selectPageBtnArrI];
        }
        
    }



    /*
        鼠标移入轮播图
    */
    rotationMapul.onmouseenter = function(){
        // console.log('鼠标移入,轮播图停止滚动');
        clearInterval(rotationMaprunAuto_time);
    }
    rotationMapul.onmouseleave = function(){
        // console.log('鼠标移出,轮播图开始滚动');
        rotationMaprunAuto();
    }
   

    /*
        左右翻页
    */ 
    leftSwitch.onclick = function(){
        rotationMapdirection = 'toLeft';
        rotationMaprun();
        rotationMaprunAuto();
    }

    rigthSwitch.onclick = function(){
        rotationMapdirection = 'toRight';
        rotationMaprun();
        rotationMaprunAuto();
    }

    /*
        选择页按钮
    */
    selectPageBtnArr.onclick = function(e){
        // 判断确定是点击到按钮上
        if(e.target.nodeName == "A"){
            //给点击的按钮增加选中样式
            selectBtnAct(beforeTargetBtn, e.target);
            beforeTargetBtn = e.target;

            //遍历选择页按钮取其索引，让轮播图跳转到索引
            for(var i = 0; i < selectPageBtnArr.children.length; i++){
                if(selectPageBtnArr.children[i] == e.target){
                    rotationMapPosArr_i = i;
                    selectPageBtnArrI = i;
                    console.log('点击了选择页，索引 = ', selectPageBtnArrI);
                    rotationMaprun('选择翻页');
                    rotationMaprunAuto();
                }    
            }
        }
    }
    
    // 选择页按钮的激活样式设置或取消
    function selectBtnAct(beforeTargetBtn,nowTargetBtn){
        beforeTargetBtn.classList.remove('selectPageBtnAct');
        nowTargetBtn.classList.add('selectPageBtnAct');
    }
}